<template>
  <div class="zzy">
    <div class="content">
      <div class="container">
        <!-- 左边 -->
        <div id="content-left">
          <!-- 最近7天趨勢 29 30 39-->
          <div class="crrentSeven">
            <div class="headerTitle commonHeader">安全总览</div>
            <!-- 最近7天趨勢圖表  -->

            <div id="crrentSevenEcharts" ref="crrentSevenEcharts"></div>
          </div>
          <!-- 安全隱患統計 -->
          <div class="softsatisfy">
            <div class="headerTitle commonHeader">
              安全隐患统计
              <ul class="headerUl">
                <li
                  :class="{ active: satisftIsActive }"
                  @click="setSatiftActive('response', 1)"
                >
                  责任区域
                </li>
                <li
                  :class="{ active: !satisftIsActive }"
                  @click="setSatiftActive('fenbao', 2)"
                >
                  分包单位
                </li>
              </ul>
            </div>
            <div class="satisftBody">
              <div class="satifyParams">
                <a-dropdown :trigger="['click']">
                  <template #overlay>
                    <a-menu @click="softDangerClick">
                      <a-menu-item key="2"> 本周 </a-menu-item>
                      <a-menu-item key="3"> 本月 </a-menu-item>
                    </a-menu>
                  </template>
                  <a-button>
                    {{ timeLabelText[satisftParams.dateType] }}
                    <DownOutlined />
                  </a-button>
                </a-dropdown>
              </div>
              <div class="satisfcontent">
                <!-- 安全隱患統計圖表 -->
                <div id="satisftEcharts" ref="satisftEcharts"></div>
              </div>
            </div>
          </div>
          <!-- 安全驗收 -->
          <div class="softcheck">
            <div class="headerTitle commonHeader">
              安全验收
              <div class="softcheckmenu">
                <div class="selectParams">
                  <a-dropdown :trigger="['click']">
                    <template #overlay>
                      <a-menu @click="handleTimeClick">
                        <a-menu-item key="2"> 本周 </a-menu-item>
                        <a-menu-item key="3"> 本月 </a-menu-item>
                      </a-menu>
                    </template>
                    <a-button>
                      {{ timeLabelText[softCheckParams.dateType] }}
                      <DownOutlined />
                    </a-button>
                  </a-dropdown>
                  <span> &nbsp;</span>
                  <a-dropdown :trigger="['click']">
                    <template #overlay>
                      <a-menu @click="handleStatusClick">
                        <a-menu-item key="0"> 不合格 </a-menu-item>
                        <a-menu-item key="1"> 合格 </a-menu-item>
                      </a-menu>
                    </template>
                    <a-button>
                      {{ statusLabelText[softCheckParams.status] }}
                      <DownOutlined />
                    </a-button>
                  </a-dropdown>
                </div>
                <span class="more" @click="visible = true">
                  更多&nbsp;&nbsp;<img
                    src="../../assets/siteSafety/more.png"
                    alt=""
                  />
                </span>
              </div>
            </div>
            <div class="softcheckbody">
              <div class="softchecklist">
                <div class="softColumn">
                  <div class="checkType">验收类型</div>
                  <div class="devicename">设备名称</div>
                  <div class="devicestatus">验收状态</div>
                  <div class="devicer">验收人</div>
                </div>
                <div class="listcontent">
                  <a-spin :spinning="yanshouLoading" tip="Loading...">
                    <div
                      class="softItem"
                      v-for="item in yanshouList.list"
                      :key="item.order"
                    >
                      <div class="checkType">
                        {{ item.acceptType || item.acceptTyp }}
                      </div>
                      <div class="devicename">
                        {{ item.deviceName || item.deviceNam }}
                      </div>
                      <div
                        class="devicestatus"
                        :style="{ color: item.status == 1 ? '#3DF29B' : 'red' }"
                      >
                        {{ status[item.status] }}
                      </div>
                      <div class="devicer">
                        {{ item.acceptUser || item.acceptUse }}
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中间 -->
        <div id="content-center">
          <!-- 安全质量分区龙虎榜 -->
          <div class="softDragon">
            <div class="commonHeader headerTitle">
              安全分区龙虎榜<span style="color: white; font-size: 16px"
                >（更新时间：2022 年 4 月）</span
              >
            </div>
            <div class="gragonContent">
              <DragonTiger></DragonTiger>
            </div>
          </div>
          <!-- 危險作業統計 -->
          <div class="dangersatify">
            <div class="headerTitle dangerHead">
              重大危险源监控
              <ul class="headerUl">
                <li
                  :class="{ active: isDangerActive }"
                  @click="setActiveTime(2)"
                >
                  本周
                </li>
                <li
                  :class="{ active: !isDangerActive }"
                  @click="setActiveTime(3)"
                >
                  本月
                </li>
              </ul>
              <span class="more" style="display: none">
                更多&nbsp;&nbsp;<img
                  src="../../assets/siteSafety/more.png"
                  alt=""
                />
              </span>
            </div>
            <div style="height: calc(100% - 50px); padding: 6px">
              <div style="height: 100%; width: 100%; position: relative">
                <a-spin :spinning="dangerWorkLoading" tip="Loading...">
                  <div class="dangercontent">
                    <div id="dangerSatifyChart" ref="dangerSatifyChart"></div>
                  </div>
                </a-spin>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div id="content-right">
          <!-- 最新動態 -->
          <div class="newactiviteis">
            <div class="actUl">平面布置</div>
            <div class="actList"></div>
          </div>
          <div class="safetyDisclosure">
            <div class="commonHeader headerTitle rightBot">安全教育/交底会</div>
            <div class="softPic">
              <div class="imglist">
                <a-carousel autoplay>
                  <div
                    class="listImgItem"
                    v-for="item in imglist.list"
                    :key="`${item}`"
                    @click="setScreenImg(item)"
                  >
                    <img :src="item" alt="" style="width: 100%" />
                  </div>
                  <!-- <img :src="person" alt="" @click="setScreenImg(person)" />
                  <img :src="person1" alt="" @click="setScreenImg(person1)" />
                  <img :src="person2" alt="" @click="setScreenImg(person2)" />
                  <img :src="person3" alt="" @click="setScreenImg(person3)" /> -->
                </a-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <dialogMask
      v-model:visible="visible"
      :dataList="yanshouList.moreList"
      v-if="visible"
    />
    <!-- 安全教育/交底会 -->
    <ImgCpt
      title="质量月启动会"
      v-model:comCpt="comCpt"
      v-if="comCpt"
      height="70%"
      width="68%"
    >
      <template v-slot:body>
        <div class="imgBox">
          <img :src="fullScreenPath" alt="" />
        </div>
      </template>
    </ImgCpt>
    <!-- 动态详情 -->
    <ImgCpt
      title="最新动态"
      v-model:comCpt="dynamicVisible"
      v-if="dynamicVisible"
      height="70%"
      width="68%"
    >
      <template v-slot:body>
        <a-spin :spinning="detailInfoLoading" tip="Loading...">
          <div class="dynamicDetail">
            <div class="dynamic-right">
              <img :src="detailObject.image" alt="" />
            </div>
            <div class="dynamic-left">
              <div class="dynamic-container">
                <div class="header">
                  <span class="headerName">质量安全</span>
                  <span class="headerSpace">{{ detailObject.area }}</span>
                </div>
                <div class="dynamic-reason">{{ detailObject.dangerBrief }}</div>
                <div class="detailList">
                  <div class="detailItem">
                    检查时间：<span>{{ detailObject.subTime }}</span>
                  </div>
                  <div class="detailItem">
                    检查人员：<span>{{ detailObject.checkUser }}</span>
                  </div>
                  <div class="detailItem">
                    检查结果：<span
                      :style="{
                        color: dangerStatusColor,
                      }"
                      >{{ detailObject.dangerStatus }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </template>
    </ImgCpt>
  </div>
</template>
<script setup>
import ImgCpt from "./component/imgCpt.vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { onMounted, reactive, ref, onUnmounted, computed, watch } from "vue";
import DragonTiger from "./component/dragonTiger.vue";
import { getData } from "@/api/softManage";
import { message } from "ant-design-vue";
import * as echarts from "echarts";
import dialogMask from "./component/listDialog.vue";
import person from "@/assets/siteSafety/person.png";
import person1 from "@/assets/siteSafety/person1.png";
import person2 from "@/assets/siteSafety/person2.png";
import person3 from "@/assets/siteSafety/person3.png";

const DANGERLEVEL = {
  1: "违章",
  2: "严重违章",
  3: "一般隐患",
  4: "较大隐患",
  5: "重大隐患",
};
const DANGERSTATUS = {
  1: "待整改",
  2: "待复查",
  3: "整改中",
  4: "已整改",
};

// 最近七天趨勢--安全管理
let crrentSevenChart = ref(null);
let softManageSpin = ref(false);
const crrentSevenEcharts = ref(null);
const crrentSeOption = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
    valueFormatter: function (value) {
      return "：" + value;
    },
    backgroundColor: "rgba(0,0,0,0.7)",
    textStyle: {
      color: "rgb(255,255,255)",
    },
  },
  legend: {
    selectedMode: false,
    data: ["重大危险源", "隐患总数", "检查总数"],
    textStyle: {
      color: "rgb(255,255,255)",
    },
    icon: "rect",
    right: "10%",
    top: "13%",
    // 图例宽高
    itemWidth: 12,
    itemHeight: 6,
  },
  grid: {
    left: "10%",
    right: "10%",
    bottom: "3%",
    top: "28%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLabel: {
        color: "rgb(255,255,255)",
        // width: 50,
        // overflow: "truncate"
      },
      type: "category",
      boundaryGap: true,
      data: [
        "2022-06-02",
        "2022-06-03",
        "2022-06-04",
        "2022-06-05",
        "2022-06-06",
        "2022-06-07",
        "2022-06-08",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
    },
  ],
  color: ["#A467FF", "#F7E05D", "#3EE6FF"],
  yAxis: [
    {
      minInterval: 1,
      axisLabel: {
        color: "rgb(255,255,255)",
      },

      type: "value",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
      name: "单位（个）",
      nameTextStyle: {
        color: "rgb(255,255,255)",
        // width: 100
        align: "center",
      },
    },
  ],
  series: [
    {
      name: "重大危险源",
      type: "line",
      lineStyle: {
        color: "#A567FE",
      },
      // showSymbol: false,
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //可以看到这里的写法有点类似于
          { offset: 0, color: "#6D5CC7" },
          // { offset: 0.5, color: "rgba(230,220,93,0.6)" }, //css动画@keyframes的写法
          { offset: 1, color: "#05586B" },
        ]),
      },
      smooth: false,
      emphasis: {
        focus: "series",
      },
      data: [4, 1, 3, 6, 2, 3, 2],
    },
    {
      name: "隐患总数",
      type: "line",
      lineStyle: {
        color: "#91CC75",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#BCB548",
          },
          {
            offset: 1,
            color: "#05586B",
          },
        ]),
      },
      smooth: false,
      emphasis: {
        focus: "series",
      },
      data: [1, 0, 3, 2, 1, 4, 5],
    },
    {
      name: "检查总数",
      type: "line",
      lineStyle: {
        color: "#4EDDEB",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0491AC",
          },
          {
            offset: 1,
            color: "#05586B",
          },
        ]),
      },
      smooth: false,
      emphasis: {
        focus: "series",
      },
      data: [1, 5, 1, 4, 2, 3, 4],
    },
  ],
});
const getCurrentSevenData = () => {
  getData(
    "/security/nearSevenDaySafeTrend.json"
  ).then(res=>{
       crrentSeOption.xAxis[0].data = res.data.result.lineTimeData;
      crrentSeOption.series[0].data = res.data.result.lineSeriesBigDangerData;
      crrentSeOption.series[1].data = res.data.result.lineSeriesDangerData;
      crrentSeOption.series[2].data = res.data.result.lineSeriesPatrolData;
      crrentSeOption && crrentSevenChart.setOption(crrentSeOption);
  });
};
// 安全隐患统计
let softDangerSatify = ref(false);
let satisftChart = ref(null);
const satisftEcharts = ref(null);
const satisftEcOption = reactive({
  grid: {
    left: "8%",
    right: "3%",
    bottom: "4%",
    top: "30%",
    containLabel: true,
  },
  tooltip: {
    backgroundColor: "rgba(0,0,0,0.7)",
    textStyle: {
      color: "rgb(255,255,255)",
    },
    valueFormatter: function (value) {
      return "：" + value;
    },
    trigger: "axis",
    axisPointer: {
      show: true,
      trigger: "axis",
      type: "cross",
    },
  },
  legend: {
    selectedMode: false,
    data: ["未消除隐患", "隐患总数"],
    top: "11%",
    textStyle: {
      color: "rgb(255,255,255)",
    },
    icon: "rect",
    itemWidth: 12,
    itemHeight: 6,
  },
  xAxis: [
    {
      // X轴文字
      axisLabel: {
        color: "rgb(255,255,255)",
        width: 80,
        overflow: "truncate",
        interval: 0,
      },
      type: "category",
      data: [],
      //X轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
      // X轴上的刻度线
      axisTick: {
        show: false,
      },
      // 鼠标移入是否出现x轴y轴的tooltip
      axisPointer: {
        show: true,
      },
    },
  ],
  yAxis: [
    {
      minInterval: 1,
      nameTextStyle: {
        color: "rgb(255,255,255)",
      },
      // 鼠标移入是否出现x轴y轴的tooltip
      axisPointer: {
        show: false,
      },
      // Y轴水平刻度线
      splitLine: {
        show: false,
      },
      // Y轴上的刻度线
      axisTick: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
      type: "value",
      name: "单位（个）",
      // Y轴文字
      axisLabel: {
        color: "rgb(255,255,255)",
      },
      //Y轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "#148da4",
        },
      },
    },
  ],
  series: [
    {
      name: "未消除隐患",
      type: "bar",
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //可以看到这里的写法有点类似于
          { offset: 0, color: "#30BEEC" },
          // { offset: 0.5, color: "rgba(230,220,93,0.6)" }, //css动画@keyframes的写法
          { offset: 1, color: "#1899AC" },
        ]),
      },
    },
    {
      name: "隐患总数",
      type: "bar",
      data: [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //可以看到这里的写法有点类似于
          { offset: 0, color: "#E6DB5F" },
          // { offset: 0.5, color: "rgba(230,220,93,0.6)" }, //css动画@keyframes的写法
          { offset: 1, color: "#C18320" },
        ]),
      },
    },
  ],
});
const getSatisData = () => {
  // let { result, message, code } = await getData(
  //   "/security/safeTroubleBarChart",
  //   satisftParams
  // );
  let res = getData('/security/safeTroubleBarChart.json').then(res=>{
    const result = res.data.find(i=> i.dateType === satisftParams.dateType && i.statisticsType === satisftParams.statisticsType )
    satisftEcOption.xAxis[0].data = result.data.result.barXaxisData;
    satisftEcOption.series[0].data = result.data.result.barNoDebarTroubleData;
    satisftEcOption.series[1].data = result.data.result.barTroubleData;
    satisftEcOption && satisftChart.setOption(satisftEcOption);
  })
};
const satisftIsActive = computed(() => {
  return satisftActiveTab.value === "response" ? true : false;
});
const satisftActiveTab = ref("response");
const satisftParams = reactive({
  projectKey: "3b1007618a682eb9f8ecfe5b5aac7e94",
  statisticsType: 1,
  dateType: 3,
});
const softDangerClick = ({ key }) => {
  console.log(key);
  satisftParams.dateType = Number(key);
  getSatisData();
};
const setSatiftActive = (val, type) => {
  satisftActiveTab.value = val;
  satisftParams.statisticsType = type;
  getSatisData();
};

// 安全验收
const status = {
  0: "不合格",
  1: "合格",
};
const yanshouLoading = ref(false);
const visible = ref(false);
const yanshouList = reactive({
  list: [],
});
const softCheckParams = reactive({
  projectKey: "3b1007618a682eb9f8ecfe5b5aac7e94",
  dateType: 2,
  status: 0,
});
const timeLabelText = {
  2: "本周",
  3: "本月",
};
const statusLabelText = {
  0: "不合格",
  1: "合格",
};
let softcheckSpin = ref(false);
const handleTimeClick = ({ key }) => {
  softCheckParams.dateType = Number(key);
  getSoftCheck();
};
const handleStatusClick = ({ key }) => {
  softCheckParams.status = Number(key);
  getSoftCheck();
};

const getSoftCheck =  () => {
  yanshouLoading.value = true;
  getData("/security/safeAcceptList.json").then(res=>{
   const result = res.data.find(i=> i.dateType == softCheckParams.dateType && i.status == softCheckParams.status )
    yanshouList.list = result.data.result
  })
  yanshouLoading.value = false;
};

// 重大危险源监控
let dangerActiveTime = ref(2);
let dangerWorkLoading = ref(false);
let dangerSatifyChart = ref(null);
const dangerSatifyOption = reactive({ 
  grid: {
    left: "8%",
    right: "20%",
    bottom: "4%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    show: false
  },
  xAxis: {
    type: "value",
    position: 'top',
    boundaryGap: true,
    axisLabel: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
          color: "white",
        },
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      boundaryGap: true,
      nameTextStyle: {
        color: "rgb(255,255,255)",
      },
      // 鼠标移入是否出现x轴y轴的tooltip
      axisPointer: {
        show: false,
      },
      // Y轴水平刻度线
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
      type: "category",
      // Y轴文字
      axisLabel: {
        show: false,
        color: "rgb(255,255,255)",
      },
      //Y轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "white",
        },
      },
    },
  ],
  series: [
    {
      type: "bar",
      data: [1932],
      itemStyle: {
        color: '#f2b0b4'
      },
    },
    {
      type: "bar",
      data: [19325],
      itemStyle: {
        color: '#84f20f'
      },
    },
    {
      type: "bar",
      data: [25660],
      itemStyle: {
        color: '#00adf9'
      }
    },
    {
      type: "bar",
      data: [25660],
      itemStyle: {
        color: '#038587'
      }
    },
    {
      type: "bar",
      data: [25660],
      itemStyle: {
        color: '#7100d0'
      }
    },
    {
      type: "bar",
      data: [25660],
      itemStyle: {
        color: '#f69d0b'
      }
    },
  ],
});

const setActiveTime = (val) => {
  dangerActiveTime.value = val;
  getDangerSatifyList();
};
let isDangerActive = computed(() => {
  return dangerActiveTime.value == 2 ? true : false;
});

// const getDangerSatifyList = async () => {
//   dangerWorkLoading.value = true;
//   const { result, message, code } = await getData(
//     "/security/hazardousOperationStatistics",
//     { dateType: dangerActiveTime.value }
//   );
//   if (code === 200) {
//     dangerSatifyList.list = result;
//   } else {
//     message.error(message);
//   }
//   dangerWorkLoading.value = false;
// };

// 最新动态和专项活动 --弹窗
let newestLoading = ref(false);
let dynamicVisible = ref(false);
let listData = reactive({
  list: [],
});
const getActiveInfo = (item) => {
  getItemInfo(item);
  dynamicVisible.value = true;
};
const newActivitiesParams = reactive({
  projectKey: "3b1007618a682eb9f8ecfe5b5aac7e94",
});
const detailObject = reactive({
  image: "",
  dangerBrief: "",
  dangerStatus: "",
  dangerLevel: "",
  area: "",
  subTime: "",
  checkUser: "",
});
let detailInfoLoading = ref(false);
let dangerStatusColor = computed(() => {
  return detailObject.dangerStatus === "待复查"
    ? "#cb40ff"
    : detailObject.dangerStatus === "整改中"
    ? "#ff9a40"
    : detailObject.dangerStatus === "已整改"
    ? "#40d0ff"
    : "#ff4040";
});
const getNewList = async () => {
  newestLoading.value = true;
  let { result, code, message } = await getData(
    "/security/recentSafeTroubleDynamic",
    newActivitiesParams
  );
  if (code === 200) {
    listData.list = result;
  } else {
    message.error(message);
  }
  newestLoading.value = false;
};
// 获取最新动态详情
const getItemInfo = async (id) => {
  detailInfoLoading.value = true;
  let { result, code, message } = await getData("/security/safeTroubleDetail", {
    id,
  });
  if (code === 200) {
    detailInfoLoading.value = false;
    detailObject.image = result.mainInfo.images[0]?.url;
    detailObject.dangerBrief = result.mainInfo.dangerBrief;
    detailObject.dangerStatus = result.reformStep[0]?.brief;
    detailObject.dangerLevel = result.mainInfo.dangerLevel;
    detailObject.area = result.mainInfo.areaName;
    detailObject.subTime = result.mainInfo.time;
    detailObject.checkUser = result.mainInfo.checkUser;
  } else {
    message.error(message, "@@@");
  }
  console.log(dangerStatusColor);
};
// 安全教育/交底会
const comCpt = ref(false);
let fullScreenPath = ref("");
function getImageUrl(name) {
  return new URL(`../../assets/siteSafety/${name}`, import.meta.url).href;
}
const imglist = reactive({
  list: [],
});
const getImgList = () => {
  getData(
    "/security/getSafetyEducationPictures.json"
  ).then(res=>{
    console.log('@@@@',res)
    imglist.list = res.data.result
  });
  // if (code == 200) {
  //   imglist.list = result;
  // } else {
  //   message.error(message);
  // }
};
const setScreenImg = (item) => {
  fullScreenPath.value = item;
  comCpt.value = true;
};
const fullScreenImgs = [
  {
    index: 0,
    url: getImageUrl("person.png"),
  },
  {
    index: 1,
    url: getImageUrl("example.png"),
  },
];

// 挂载
onMounted(() => {
  // 初始化最近七天趋势
  crrentSevenChart = echarts.init(crrentSevenEcharts.value);
  crrentSeOption && crrentSevenChart.setOption(crrentSeOption);
  getCurrentSevenData();

  // 安全隐患统计
  satisftChart = echarts.init(satisftEcharts.value);
  satisftEcOption && satisftChart.setOption(satisftEcOption);
  getSatisData();
  // 重大安全源监控
  dangerSatifyChart = echarts.init(dangerSatifyChart.value);
  dangerSatifyOption && dangerSatifyChart.setOption(dangerSatifyOption);
  getSoftCheck();
  getNewList();
  // getDangerSatifyList();
  window.onresize = () => {
    crrentSevenChart.resize();
    satisftChart.resize();
  };
  getImgList();
});

onUnmounted(() => {
  window.onresize = null;
});
</script>
<style lang="less" scoped>

body, html {
  // overflow: auto;
}

:deep(.ant-carousel){
  height: 100%;
  width: 100%;
  .slick-slider{
    height: 100%;
  width: 100%;
  .slick-list{
    height: 100%;
  width: 100%;
  .slick-track{
    height: 100%;
  width: 100%;
  .slick-slide{
    height: 100%;
  width: 100%;
  .listImgItem{
    width: 100%;
    height: 100%;
      img{
    display: block;
    height: 100%;
    width: 100%;
  }
  }
  
  }
  }
  }
  }
}

:deep(.ant-spin-nested-loading){
  height: 100%;
  width: 100%;
  .ant-spin-container{
    height: 100%
  }
}
:deep(.ant-spin-nested-loading > div > .ant-spin){
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
:deep(.ant-spin){
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.imgBox{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  img{
    display: block;
    // max-width: 100%;
    width: 100%;
    height: auto
  }
}
.dynamicDetail{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  .dynamic-right{
    width: 74%;
    height: 100%;
    overflow: auto;
    img{
      display: block;
      max-width: 100%;
      height: auto;
    }
  }
  .dynamic-left{
    width: 25.4%;
    height: 100%;
    padding: 1%;
    .dynamic-container{
      height: 100%;
      width: 100%;
      .header{
        height:60px;
        display: flex;
        align-items: center;
        
        .headerSpace,.headerName{
          font-size: 20px;
        }
        .headerName{
          display: inline-block;
          height:41px;
          width:127px;
          border-radius: 21px;
          background: #52BDFF;
          text-align: center;
          line-height: 40px;
          margin-right: 20px;
          color: white;
          font-size: 20px;
        }
        .headerSpace{
          color: #F87E4E;
          font-size: 16px;
        }
        
      }
      .dynamic-reason{
        margin: 20px 0;
        font-size: 24px;
        color: white
      }
      
    }
    .detailList{
      .detailItem{
          font-size: 20px;
          color:#52BDFF;
          span{
            color:white;
            font-size: 20px;
          }
        }
    }
  }
}


.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
:deep(.ant-btn){
  background: rgb(5,25,39);
  border-color: rgb(72,131,158);
  color: #fff
}
.demo-dropdown-wrap :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
ul {
  margin: 0;
  padding: 0;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

ul li {
  list-style: none;
  padding: 0;
  float: left;
  box-sizing: border-box;
  font-size: 14px;
}
.bord1 {
  box-sizing: border-box;
  border: 1px solid yellow;
}
.commonHeader {
  position: relative;
  min-height: 50px;
  line-height: 50px;
  height: 18%;
}
:deep(.ant-divider-horizontal) {
  margin: 0;
}
.headerTitle {
  color: yellow;
  font-size: 24px;
  padding: 0 20px;
  position: relative;
  letter-spacing: 2px;
  span{
    letter-spacing: 0;
  }
}
.pad10 {
  padding: 10px;
  box-sizing: border-box;
}
.zzy {
  color: white;
  // min-height: 1080px;
  // min-width: 1920px;
  height: 90vh;
  width: 100%;
  // overflow: auto;
}
.content {
  width: 100%;
  padding: 0 1% 15px;
  // min-height: 842.4px;
  height: 100%;
  min-width: 1436px;
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  // 正文开始
  #content-left,
  #content-center,
  #content-right {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  // 正文左边
  #content-left {
    width: 28.2%;
    height: 100%;
    
    .crrentSeven {
      height: 35.7%;
      width: 100%;
      background: url(../../assets/siteSafety/left29.png);
      background-size: 100% 100%;
      #crrentSevenEcharts {
        width: 100%;
        height: 80%;
        margin: 0 auto;
        position: relative
        // max-height: calc(100% - 80px);
        // height: 84%;
        // margin: 5% auto 0;
      }
    }
    .softsatisfy {
      height: 34.7%;
      width: 100%;
      background: url(../../assets/siteSafety/left30.png);
      background-size: 100% 100%;
      .headerUl {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 4px;
        background: url("../../assets/siteSafety/unactive.png");
        background-size: 100% 100%;
        li {
          display: inline-block;
          padding: 2px 15px;
          // background: rgb(9,46,73);
          color: rgb(52, 148, 166);
          height: 30px;
          line-height: 24px;
          cursor: pointer;
          &.active {
            background: url("../../assets/siteSafety/active.png");
            background-size: 100% 100%;
            color: white;
          }
        }
      }
      .satisftBody {
        box-sizing: border-box;
        padding: 6px;
        height: 84%;
        max-height: calc(~"100% - 50px");
        position: relative;
        .satifyParams {
            position: absolute;
            top:10%;
            right: 10px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 10px;
            z-index: 99
          }
        .satisfcontent {
          height: 100%;
          // overflow: hidden;
          position: relative;
          
          #satisftEcharts {
            width: 90%;
            height: 95%;//todo
            margin: 0 auto
          }
        }
      }
    }
    .softcheck {
      height: 28%;
      width: 100%;
      background: url(../../assets/siteSafety/left39.png);
      background-size: 100% 100%;
      .softcheckbody {
        // height: calc(~"100% - 50px");
        height: 84%;
        padding: 6px;
        box-sizing: border-box;
        max-height: calc(~"100% - 50px");
        
        .softchecklist {
          height: calc(~"100% - 10px");
          // height: 100%;
          padding: 0 10px;
          .softColumn {
            height: 30px;
            line-height: 30px;
            div {
              font-size: 16px;
            }
          }
          .softColumn,
          .softItem {
            display: flex;
            justify-content: space-between;
            text-align: center;
          }
          .checkType {
            width: 30%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
          .devicename {
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
          .devicestatus {
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
          .devicer {
            width: 20%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
          .listcontent {
            height: calc(~"100% - 40px");
            overflow: auto;
                margin-top: 10px;
                position: relative;
            .softItem {
              height: 30px;
              line-height: 30px;
            }
            .softItem:nth-child(2n + 1) {
              background: #217097;
            }
            .softItem:nth-child(2n) {
              background: none;
            }
          }
        }
      }
      .softcheckmenu {
        display: inline-block;
          // height: 60px;
          display: flex;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 16px;
          .selectParams{
            margin-right:20px;
            display: flex;
            align-items: center;
          }
          .more{
            display: flex;
            align-items: center;
            color: white;
            cursor: pointer;
            font-size: 14px;
          }
        }
    }
  }
  #content-center {
    width: 42%;
    height: 100%;
    min-width:790px;
    .dangersatify {
      height: 35%;
      width: 100%;
      border: 1px solid #5faebe70;
      background-size: 100% 100%;
      min-height: 170px;
      .dangerHead {
        position: relative;
        height: 50px;
        line-height: 50px;
        background: url(../../assets/siteSafety/dangerbg.png);
        background-size: 100% 100%;
        // height: 30%;
        .more {
          position: absolute;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          color: white;
          display: flex;
          align-items: center;
        }
      }
      .headerUl {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        background: url("../../assets/siteSafety/unactive.png");
        background-size: 100% 100%;
        li {
          cursor: pointer;
          display: inline-block;
          padding: 2px 15px;
          // background: rgb(9,46,73);
          color: rgb(52, 148, 166);
          height: 30px;
          line-height: 24px;
          &.active {
            background: url("../../assets/siteSafety/active.png");
            background-size: 100% 100%;
            color: white;
          }
        }
      }
      .dangercontent {
        height: 100%;
      // height: calc(~"100% - 50px");
      // max-height: 70%;
      // padding: 10px;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-around;
      position: relative;
      background: #08476670;
      #dangerSatifyChart{
        height: 100%;
        width: 100%;
      }
    }
    }
    .softDragon{
      height: 64.34%; //before 71.34
      width: 100%;
      // background: url(../../assets/siteSafety/dragon.png);
      background-size: 100% 100%;
      box-sizing: border-box;
       background-image: linear-gradient(to top,#011224, #0b3752);
      border: 1px solid #5faebe70;
      
      .commonHeader{
        height: 9%;
        // background-image: linear-gradient(to right,#011224, #0b3752);
      }
      .gragonContent{
        height: 91%;
        width: 100%;
        max-height: calc(~"100% - 50px");
        padding: 6px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          display: block;
          max-width:100%;
          height: auto;
          border-bottom-left-radius: 15px;
        }
      }
    }
  }
  #content-right {
    width: 28.5%;
    height: 100%;
    // 最新動態
    .newactiviteis {
      height: 60%;
      background: url("../../assets/siteSafety/rightcenter.png") no-repeat;
      background-size: 100% 100%;
      .actUl {
        height: 9%;
        min-height: 50px;
        line-height: 50px;
        color: yellow;
        letter-spacing: 2px;
      font-size: 24px;
      padding: 0 20px;
      position: relative;
      }
      .actList {
        height: calc(~"100% - 50px");
        max-height: 91%;
        box-sizing: border-box;
        padding: 13px;
        background: url('../../assets/siteSafety/platpic.png') no-repeat;
        background-size: 100% 100%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        .list {
          height: 100%;
          width: 100%;
          // background: red;
          overflow: auto;
          &::-webkit-scrollbar-thumb {
                background: #33A2EB;
          }
          .actitem {
            // height: 100px;
            padding: 0 6px;
            box-sizing: border-box;
            font-size: 14px;
            cursor: pointer;
            .listitem {
              
              height: 90px;
              // background: darkcyan;
              border-bottom: 1px solid #125274;
              display: flex;
              justify-content: space-between;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              .textall {
                height: 16px;
                line-height: 16px;
                margin: 10px 0;
                font-size: 14px;
              }
              .textbottom {
                border-left: 3px solid #EDE427;
                padding-left: 6px;
                font-size: 14px;
              }
              .timeAndTitle{
                width: 30%;
                .texttop{
                  font-size: 14px;
                }
                
            .center-bot{
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              
            }
              }
              .nameAndType{
                width: 20%;
                .texttop{
                  font-size: 14px;
                }
              }
              .placeAndStatus,
              .placeImg{
                width: 25%;
                text-align: center;
                
                
                // background: red;
              }
              .textstatus {
                font-size: 14px;
                display: inline-block;
                box-sizing: border-box;
                padding: 2px;
                height: 20px;
                line-height: 14px;
                border-radius: 4px;
                width: auto;
              }
              .textimg {
                height: 66px;
                width: 107px;
                // background: red;
                display: flex;
                align-items: center;
                overflow: hidden;
                img{
                  display: block;
                  max-width:100%;
                  height: auto
                }
              }
            }
            &:last-child .listitem {
              border: none;
            }
          }
        }
      }
    }
    
    .safetyDisclosure{
      height: 39%;
      width: 100%;
      background: url(../../assets/siteSafety/rightbot.png);
      background-size: 100% 100%;
      .rightBot{
        height: 55px;
        // height: 22%;
      }
      .softPic{
        padding: 6px;
        height: calc(~"100% - 55px");
        // height: 78%;
        box-sizing: border-box;
        
        .imglist{
          width:100%;
          height: 100%;
          background: red;
          // overflow: hidden;
          img{
            display: block;
            height: 100%;
            width: auto;
            }
        }
        
      }
    }
  }
}
</style>